<template>
  <div class="dashboard-container">
    <!-- 企业管理 -->
    <div class="app-container">
      <el-card class="box-card">

        <el-form ref="form" :model="form" label-width="80px" :inline="true" >
          <el-form-item label="标签名称">
            <el-input v-model="form.tags" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="form.province" placeholder="请选择">
              <el-option label="重庆市" value="重庆市"></el-option>
              <el-option label="天津市" value="天津市"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="地区">
            <el-select v-model="form.city" placeholder="请选择">
              <el-option label="南岸区" value="南岸区"></el-option>
              <el-option label="和平区" value="和平区"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
            <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="resetForm">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
          <el-form-item>

            <el-button type="success" icon="el-icon-edit"  @click="newincreaseuser" >新增用户</el-button>
          </el-form-item>
        </el-form>
        <!-- 共多少记录 todo-->
          <el-alert
            type="info"
            :closable="false"
            class="infostyle"
            >
            共{{companysList.counts}}条记录
          </el-alert>

          <my-table
          class="mytablestyle"
          :table-props="{
            data: companysList.items,
            border: false,
          }"
          :columns="[
            { label: '序号', prop: 'id', width: 80, align: 'center' },
            { label: '企业编号', prop: 'number', width: 180, align: 'center' },
            { label: '企业简称', prop: 'shortName', width: 180, align: 'center' },
            { label: '标签', prop: 'tags', width: 180, align: 'center' },
            { label: '创建者', prop: 'creatorID', width: 180, align: 'center' },
            { label: '创建日期', prop: 'addDate', width: 180, align: 'center' },
            { label: '备注', prop: 'remarks', width: 180, align: 'center' },
            { label: '状态', prop: 'state', width: 180, align: 'center',sortable: true, },
            { label: '操作', slotName: 'operate', align: 'center', width:180, fixed: 'right' },  // 带插槽slotName
          ]"
          :pagination-props="{
            layout: ' prev, pager, next, sizes, jumper, total',
            total: companysList.counts,
            background: true
          }"
          :pagination-events="events"
        >
          <template   v-slot:operate="scope">
            <el-row>
              <el-button type="primary" icon="el-icon-edit"  circle @click="compile(scope.row)"></el-button>
              <el-button type="success" icon="el-icon-check"   circle @click="forbiddenCP(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete"  circle @click="deleteCP(scope.row)"></el-button>
            </el-row>
          </template>
        </my-table>



        <!-- {{companysList}} -->
           <!-- 新增用户 -->
          <el-dialog title="新增用户" :visible.sync="newincreaseWin">
            <el-form :model="newincrease" :rules="rules" ref="overallYZ">
              <el-form-item label="企业名称" :label-width="formLabelWidth" prop="username">
                <el-input v-model="newincrease.companyname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="所属公司" :label-width="formLabelWidth" prop="username">
                <el-input v-model="newincrease.belongcompany" autocomplete="off"></el-input>
                <div>https://www.tianyancha.com （在此可查询所属公司全称及简称</div>
              </el-form-item>

              <el-form-item label="城市地区" prop="username">
                <el-select v-model="newincrease.province" placeholder="请选择活动区域">
                  <el-option label="重庆市" value="重庆市"></el-option>
                  <el-option label="天津市" value="天津市"></el-option>
                </el-select>
                <el-select v-model="newincrease.city" placeholder="请选择活动区域" prop="username">
                  <el-option label="南岸区" value="南岸区"></el-option>
                  <el-option label="和平区" value="和平区"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="方向(企业标签)" :label-width="formLabelWidth" prop="username">
                <el-input v-model="newincrease.tags" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="备注" prop="username">
                <el-input type="textarea" v-model="newincrease.remarks"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="newincreaseWinClose">取 消</el-button>
              <el-button type="primary" @click="newincreaseWinOk">确 定</el-button>
            </div>
          </el-dialog>
        <!-- {{companysList}} -->
           <!-- 编辑（企业管理） -->
          <el-dialog title="编辑用户" :visible.sync="compilecompany">
            <el-form :model="compileform" :rules="rules">
              <el-form-item label="企业名称" :label-width="formLabelWidth" prop="username">
                <el-input v-model="compileform.companyname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="所属公司" :label-width="formLabelWidth" prop="username">
                <el-input v-model="compileform.belongcompany" autocomplete="off"></el-input>
                <div>https://www.tianyancha.com （在此可查询所属公司全称及简称</div>
              </el-form-item>

              <el-form-item label="城市地区" prop="username">
                <el-select v-model="compileform.province" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
                <el-select v-model="compileform.city" placeholder="请选择活动区域" prop="username">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="方向(企业标签)" :label-width="formLabelWidth" prop="username">
                <el-input v-model="compileform.tags" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="备注" prop="username">
                <el-input type="textarea" v-model="compileform.remarks"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="compilecompanyClose">取 消</el-button>
              <el-button type="primary" @click="compilecompanyOk">确 定</el-button>
            </div>
          </el-dialog>
          <!-- {{companysList.items[0].state}} -->


          <!-- 启用禁用 -->
            <el-dialog
              title="提示"
              :visible.sync="forbidden"
              width="30%"
              >
              <span>确定修改？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="forbiddenClose">取 消</el-button>
                <el-button type="primary" @click="forbiddenOk">确 定</el-button>
              </span>
            </el-dialog>

          <!-- 删除确认 -->
            <el-dialog
              title="提示"
              :visible.sync="deleteOne"
              width="30%"
              >
              <span>确定删除？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="deleteOneClose">取 消</el-button>
                <el-button type="primary" @click="deleteOneOk">确 定</el-button>
              </span>
            </el-dialog>



      </el-card>

    </div>

  </div>
</template>

<script>
import { mapState, mapActions} from "vuex";
import * as companysApi from "@/api/companys";


// 设置编辑功能的值
var okNumber=null
var okId = null;
 // 启用禁用
let forbiddenid = null;
let forbiddenstate = null;
// 删除功能
let deleteid = null


export default {
  name: 'CompanysList',
      data() {
      return {
        // 初始页数
        page: 1,
        pagesize: 10,
        // 新增用户弹窗
        newincreaseWin: false,
        // 编辑角色弹窗
        compilecompany: false,
        // 禁用启用
        forbidden: false,
        // 删除显示弹窗
        deleteOne: false,
        // 新增用户信息集合
        newincrease:{
          companyname: '',
          belongcompany: '',
          province: '',
          city: '',
          tags: '',
          remarks: '',

        },
        // form todo
        form: {
          tags: null,
          province: null,
          city: null,
          shortName: null,
          state: null,
        },
        // 编辑按钮里面的值 /可反显用
        compileform:{
          companyname: '',
          belongcompany: '',
          province: '',
          city: '',
          tags: '',
          remarks: '',
        },
        rules:{
          // username:[
          //   { required: true, message: "内容不能为空", trigger: "blur" },
          // ],
              // todo 规则待定
        },
        // 点击翻页监听事件
        events: {
          "current-change": this.handleCurrentChange,
          "size-change": this.pagesizeChange,
        },
        formLabelWidth: "120px",
      }
    },
    computed: {
      ...mapState("companys",[
        // 获取列表数据
        "companysList",
         // 获取企业管理详情
        "companysdetailList"
      ]),

    },
    methods: {
      ...mapActions("companys",[
           // 获取列表数据
        "updateCompanysList",
          // 获取企业管理详情
        "updateCompanysDetailList"
      ]),
      // 清除按键功能
      resetForm() {
         this.form = {}
      },
      // 点击搜索按键功能
      onSubmit() {
        console.log(this.form);

        // 搜索传数据
        this.updateCompanysList({
          page: this.page,
          pagesize: this.pagesize,
          tags: this.form.tags,
          province: this.form.province,
          city: this.form.city,
          shortName: this.form.shortName,
          state: this.form.state,
        })
      },
      // 新增用户
      newincreaseuser (){
        this.newincreaseWin = true

      },
      // 点击新增取消按钮弹窗
      newincreaseWinClose(){
          this.newincreaseWin = false
          // 点取消移出选框内容警告
        this.$refs.overallYZ.resetFields();
      },
      // 点击新增用户弹窗确定按钮
      newincreaseWinOk(){
        companysApi.createNewUser({
          isFamous: true,
          shortName: this.newincrease.companyname,
          company: this.newincrease.belongcompany,
          province: this.newincrease.province,
          city: this.newincrease.city,
          tags: this.newincrease.tags,
          remarks: this.newincrease.remarks,
        })

         this.newincreaseWin = false
             // 点确定移出选框内容警告
        this.$refs.overallYZ.resetFields();


            //     this.$refs.overallYZ.validate(async (valid)=>{
            //   if (valid){
            //     // 这是等数据传入后台的操作
            //      await  employeesApi.setNewStaff(this.form)
            //         .then(msg => this.$message.success(msg))
            //         .catch(msg => this.$message.error(msg))
            //           // 新增员工弹窗关闭
            //       this.newstaffclick = false;
            //       // 新增后更新列表
            //       this.updateEmployeesList({
            //         page: this.currentPage,
            //         size: this.pageSize,
            //       });

            //   }else {
            //     this.$message.error('请输入正确的表单信息');
            //     return false;
            //   }
            // })
      },
      // 点击编辑按钮触发
     async compile(row){
        console.log('1',row);
         // 获取企业管理详情
        await this.updateCompanysDetailList(row.id)
        this.compilecompany = true;
        // 返显
        this.compileform= {
          companyname: this.companysdetailList.shortName,
          belongcompany: this.companysdetailList.company,
          province: this.companysdetailList.province,
          city: this.companysdetailList.city,
          tags: this.companysdetailList.tags,
          remarks: this.companysdetailList.remarks,
        }
        okId = row.id
        okNumber= row.number

      },
      // 点击编辑里面的取消按钮触发
      compilecompanyClose(){
        this.compilecompany = false

      },
       // 点击编辑里面的确定按钮触发
      compilecompanyOk(){
       companysApi.setCompanysDetailList(
        {
          number:okNumber,
          isFamous: true,
          id: okId,
          shortName: this.compileform.companyname,
          company: this.compileform.belongcompany,
          province: this.compileform.province,
          city: this.compileform.city,
          tags: this.compileform.tags,
          remarks: this.compileform.remarks,
        }
      ) //todo
        this.compilecompany = false
            // 获取列表数据
        this.updateCompanysList({
          page: this.page,
          pagesize: this.pagesize,
        })
         .then(msg => this.$message.success('修改成功'))
         .catch(msg => this.$message.error('修改失败'))
      },
      // 更新页数
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        // 更新页数列表
        this.updateCompanysList({
          page: (this.page = val),
          pagesize: this.pagesize,
        });
      },
      // 更新每页展示数量
      pagesizeChange(val) {
        console.log(`当前页: ${val}`);
        // 更新页数列表
        this.updateCompanysList({
          page: this.page,
          pagesize: (this.pagesize = val),
        });
      },
      // 点击禁用启用
      forbiddenCP(row){
        this.forbidden = true
        forbiddenid= row.id
        forbiddenstate= row.state

      },
      // 点击禁用启用取消按键
      forbiddenClose(){
        this.forbidden = false
      },
       // 点击禁用启用确定按键
     async forbiddenOk(){
        this.forbidden = false
        // 测试启用禁用
        await companysApi.setCompanysState({
         id:forbiddenid ,state:forbiddenstate ==='启用' ? 0 : 1
        });
        // 获取列表数据
        this.updateCompanysList({
          page: this.page,
          pagesize: this.pagesize,
        })
         .then(msg => this.$message.success('修改成功'))
         .catch(msg => this.$message.error('修改失败'))

      },
      // 点击删除按键
      deleteCP(row){
        this.deleteOne = true
        deleteid = row.id
      },
      // 取消删除键
      deleteOneClose(){
        this.deleteOne = false
        this.$message('已取消操作')
      },
      // 确定删除按键
      deleteOneOk(){
        companysApi.deleteCompany({id:deleteid})
        this.deleteOne = false
        // 获取列表数据
        this.updateCompanysList({
          page: this.page,
          pagesize: this.pagesize,
        })
        .then(msg => this.$message.success('删除成功'))
        .catch(msg => this.$message.error('删除失败'))
      }

    },
    created() {
      // 获取列表数据
    this.updateCompanysList({
      page: this.page,
      pagesize: this.pagesize,
    });

  },
}

</script>

<style lang="scss" scoped>
  .box-card {
    width: 100%;
  }
  .infostyle {
    margin-bottom: 8px;
    // outline: 1px solid red;
  }
  .mytablestyle {
    //  outline: 1px solid red;

  }

</style>
